import React, {
  useMemo,
  useState,
  forwardRef,
  useImperativeHandle,
} from 'react'
import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
import Swiper from 'react-native-swiper'
import { searchData } from '../assets/data/data'
export default forwardRef(function (
  props: { style?: StyleProp<ViewStyle>; height?: number },
  ref,
) {
  const [index, setIndex] = useState(0)
  useImperativeHandle(ref, () => ({
    value() {
      return { key: index, value: searchData[index] }
    },
  }))
  const content = useMemo(
    () => (
      <Swiper
        style={StyleSheet.compose(style.swiperWrap, props.style)}
        height={props.height}
        showsButtons={false}
        showsPagination={false}
        autoplay={true}
        loop={true}
        horizontal={false}
        onIndexChanged={i => setIndex(i)}
      >
        {searchData.map((item, key) => (
          <View
            key={key}
            style={StyleSheet.compose(style.wrap, { height: props.height })}
          >
            <Text style={style.txt}>{item}</Text>
          </View>
        ))}
      </Swiper>
    ),
    [],
  )
  return <>{content}</>
})
const style = StyleSheet.create({
  swiperWrap: {},
  wrap: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  txt: {
    fontSize: 14,
    height: 16,
    color: '#bbb',
  },
})
